<%@ page import="Entities.DoeBookEntity" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%--
  Created by IntelliJ IDEA.
  User: wzzz
  Date: 2018/6/8
  Time: 22:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-8">
<h2>购买详情</h2>
<table>
    <tr>
        <th style="width: 100px">图书ID</th>
        <th style="width: 100px">书名</th>
        <th style="width: 100px">价格</th>
        <th style="width: 100px">数量</th>
    </tr>


    <s:iterator value="doeBookEntityList" var="doeBook" status="index">
        <tr>
            <td class="bookId">${doeBook.bookId}</td>
            <td>${doeBook.bookName}</td>
            <td>${doeBook.price}</td>
            <td><input class="subBtn" type="button" value="-" onclick="subBook(this)"><span class="bookCount">1</span><input class="addBtn" type="button" value="+"onclick="addBook(this)"></td>
        </tr>
    </s:iterator>
</table>
            <br>

<label style="font-size: 20px">总价：</label><lable id="tar" style="font-size: 20px">${totalPricePerBook}</lable>
            <input type="button" value="提交订单" onclick="forward()">

<script>
    var countList = [];
    var idList = document.getElementsByClassName("bookId");

    function subBook(var1) {
        if(parseInt(var1.nextSibling.innerHTML)==1)
            return;
//        alert(var1.nextSibling);
        var text=parseInt(var1.nextSibling.innerHTML)-1;
        var1.nextSibling.innerHTML=text;
//       alert(document.getElementById("tar").innerHTML);
//        alert(var1.parentElement.parentElement.getElementsByTagName("td")[1].innerHTML);
        var price=parseFloat(document.getElementById("tar").innerHTML)-parseFloat(var1.parentElement.parentElement.getElementsByTagName("td")[2].innerHTML);
        document.getElementById("tar").innerHTML=price;
    }
    function addBook(var1) {
//        alert(var1.nextSibling);
        var text=parseInt(var1.previousSibling.innerHTML)+1;
        var1.previousSibling.innerHTML=text;
        var price=parseFloat(document.getElementById("tar").innerHTML)+parseFloat(var1.parentElement.parentElement.getElementsByTagName("td")[2].innerHTML);
        document.getElementById("tar").innerHTML=price;
    }

    function forward() {
        $.ajax({
            type: "POST",
            url: "orderReceiver",
            data:"dataJson="+generateJson(),
            error:function () {
                alert("错误");
            },
            success:function (msg) {
                alert(msg);
            }

        });
    }

    function generateJson() {
        var dataJson;
        for(var i = 0;i<idList.length;i++){
            var idNode = idList[i];
            var currentNode = idNode.parentElement;
            var countNode = currentNode.getElementsByTagName("td")[3];
            var bookCount = countNode.getElementsByClassName("bookCount")[0].innerHTML;
            var content = {
                "bookId":idNode.innerHTML,
                "count" : bookCount
            };
            countList[i] = (content);
        }

        dataJson = JSON.stringify(countList, null, 0);
        return dataJson;
    }

</script>
        </div>
    </div>
</div>
</body>
</html>
